<template>
	<!-- 留言反馈容器，设置最大宽度、居中、内边距 -->
	<div class="feedback-container">
		<!-- 页面标题，设置字体大小、颜色、外边距和文本对齐方式 -->
		<h1 class="feedback-title">留言反馈</h1>
		<!-- 使用van-form组件来管理表单 -->
		<van-form>
			<!-- 姓名输入字段，使用v-model双向绑定数据 -->
			<van-field v-model="form.name" label="姓名" placeholder="请输入您的姓名"
				:rules="[{ required: true, message: '姓名不能为空' }]" />
			<!-- 邮箱输入字段，使用v-model双向绑定数据 -->
			<van-field v-model="form.email" label="邮箱" placeholder="请输入您的邮箱"
				:rules="[{ required: true, message: '邮箱不能为空' }, { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱格式' }]" />
			<!-- 主题输入字段，使用v-model双向绑定数据 -->
			<van-field v-model="form.subject" label="主题" placeholder="请输入反馈主题"
				:rules="[{ required: true, message: '主题不能为空' }]" />
			<!-- 反馈内容输入字段，使用v-model双向绑定数据，设置为文本域类型 -->
			<van-field v-model="form.message" label="反馈内容" type="textarea" placeholder="请输入您的反馈内容"
				:rules="[{ required: true, message: '反馈内容不能为空' }]" />
			<!-- 提交按钮，设置为主要按钮样式，绑定点击事件 -->
			<van-button type="primary" @click="submitFeedback">提交反馈</van-button>
		</van-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据对象，包含姓名、邮箱、主题和反馈内容
				form: {
					name: '',
					email: '',
					subject: '',
					message: ''
				}
			};
		},
		methods: {
			submitFeedback() {
				// 表单验证方法，只有当所有字段都通过验证时才提交
				this.$refs.form.validate((valid) => {
					if (valid) {
						// 这里可以添加提交表单的逻辑，比如发送请求到后端接口
						console.log('提交的反馈信息：', this.form);
						// 提交后可以清空表单
						this.form = {
							name: '',
							email: '',
							subject: '',
							message: ''
						};
					} else {
						// 如果验证不通过，提示用户
						console.log('表单填写有误，请检查');
						return false;
					}
				});
			}
		}
	};
</script>

<style scoped>
	.feedback-container {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		/* 添加边框 */
		border-radius: 5px;
		/* 添加圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		/* 添加阴影效果 */
		background-color: #f9f9f9;
		/* 设置背景颜色 */
	}

	.feedback-title {
		font-size: 28px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}

	.van-field {
		margin-bottom: 15px;
		/* 增加输入字段之间的间距 */
	}

	.van-button {
		width: 100%;
		/* 使按钮占满容器宽度 */
	}
</style>